<template>
    <div class="app-container container-fluid">
        <div class="row pg-title" style="-webkit-app-region: drag;">
            <div class="col log-col contrl-border w-full">
                <cb-button class="logo-bar">
                    <i class="logo logo-icon bi bi-puzzle"></i>
                </cb-button>
            </div>
            <div class="col sec-menus contrl-border w-full" v-show="!!layouts.getActiveSysBar">
                <!-- <cb-button>
                    <span class="logo logo-name">AI魔方</span>
                </cb-button> -->
                <cb-button @click="teggleLeft" class="item">
                    <i class="bi bi-layout-sidebar-inset"></i>
                </cb-button>
                <cb-button class="item">
                    <i class="bi bi-search"></i>
                </cb-button>
                <cb-button class="item">
                    <i class="bi bi-bookmark"></i>
                </cb-button>
            </div>
            <div class="right-menu sec-menus contrl-border w-full" v-show="!!layouts.getActiveSysBar">
                <!-- <cb-button>
                    <span class="logo logo-name">AI魔方</span>
                </cb-button> -->
                <cb-button class="item" @click="appendSysTab">
                    <i class="bi bi-vr"></i>
                </cb-button>
                <cb-button :class="data.showRight? 'selected':''" @click="teggleRight" class="item">
                    <i class="bi bi-layout-sidebar-inset-reverse"></i>
                </cb-button>
            </div>
            <div class="frame-contrl contrl-border">
                <a class="s-btn min-btn bi-dash-lg" @click="trunWindow" href="javascript:;"></a>
                <a class="s-btn max-btn bi-subtract" @click="trunWindow" href="javascript:;"></a>
                <a class="s-btn close-btn bi-x-lg" @click="trunWindow"  href="javascript:;"></a>
            </div>
        </div>
        <div class="app-content">
            <div class="cb-row">          
                <div class="sys-col sys-bars">
                    <sysBarGround></sysBarGround>
                </div>
                <div class="sys-col sys-menu"
                     ref="sysMainMenu"
                     v-resizable="'right'"  
                     :class="layouts.getActiveSysBar ? 'openn': 'closee'"
                     v-resizer="resize"
                     :style="layouts.getActiveSysBar ? ('width:'+layouts.getmainMenuWidth+';') : 'width:0;'">
                    <sysMenuGround></sysMenuGround> 
                </div>
                <div class="sys-col sys-col-content sys-content">
                    <sysMainTabs></sysMainTabs>
                </div>
                <div v-for="item in data.extPanles" class="sys-col sys-col-content sys-content">
                    <sysMainTabs :tabs="item"></sysMainTabs>
                </div>
                <div v-show="data.showRight" class="sys-col sys-col-content sys-right" v-resizable="'left'">right</div>
            </div>
        </div>
    </div>
</template>

<script setup> 
import sysBarGround from './layoutBeta/sysBarGround.vue';
import sysMainTabs from './layoutBeta/sysMainTabs.vue'; 
import sysMenuGround from './layoutBeta/sysMenuGround.vue';
import $ from 'jquery'
import { ComponentInternalInstance, getCurrentInstance, reactive } from 'vue';
import { useLayoutStore } from '@frontend/stores/pinia/layoutStore'
import { ref } from 'vue';

const sysMainMenu = ref(null)
const data = reactive({
    showRight: false,
    extPanles: []
})

const layouts = useLayoutStore()
const self = getCurrentInstance()
const trunWindow = (e)=>{
    const target = e.target
    $(target).hasClass('max-btn') && (window.ipc.send('window-max'));
    $(target).hasClass('min-btn') && window.ipc.send('window-min');
    $(target).hasClass('close-btn') && window.ipc.send('window-close');
}
let lastActive = null
const teggleLeft = (e)=>{
    if(layouts.activeBar){
        lastActive = layouts.activeBar
        layouts.setAcitveBar('')
    }else if(lastActive){
        layouts.setAcitveBar(lastActive.name)
    }
}
const teggleRight = ()=>{
    console.log('teggle....')
    data.showRight = !data.showRight
}
const appendSysTab = ()=>{
    console.log('append sys tab')
    data.extPanles.push({
        name: 'ssss'
    })
}


const resize = (e)=>{
    if(sysMainMenu && layouts.getActiveSysBar){
        //console.log(sysMainMenu.value.style.width)
        layouts.setMenuWidth(sysMainMenu.value.style.width)
    }
}
</script>

<style scoped lang="scss">
.log-col{
    max-width:50px;
}
.logo-name{
    font-family: emoji;
    font-size: .8rem;
}
.logo-icon{
    font-size:1.2rem;
}
.logo-bar{
    padding: 0 4px !important;
    position: relative;
    height: 29px;
    top: 2px;
    .logo-icon{
        font-size:1.3rem;
    }
    &:hover{
        color: $ft-act-logo-bar-color !important;
        text-shadow: 0px -2px 7px $ft-act-log-hover-showd;
    }
}
.sys-menu{
  background-color: $menu-back-color;
  border-right:1px solid $sys-border-color;
  transition-property: width;
  transition-duration: 0.1s;
  &.openn{
      width:unset;
      min-width: 200px;
  }
  &.closee{
    width:0 !important;
    min-width: unset;
  }
}
.sec-menus{
    .item{
        padding:0 10px;
    }
}
.right-menu{
    position: relative;
    right:160px;
}
.contrl-border{
    padding-left:5px;
}
.frame-contrl{
    padding-right:0px;
    height:$header-height;
    display:flex;
    position:absolute;
    right:0;
    .s-btn{
      display: inline-block;
      width: 50px;
      line-height: $header-height;
      text-align:center;
      color:#a5a5a5;
      text-decoration: none;
      &:hover{
        background-color: rgb(97, 97, 97);
        color: #fff;
      }
      &.close-btn:hover{
        background-color: rgb(175, 61, 61);
      }
    }
}
</style>